<template>
  <div>
    <p>我是子组件</p>
    <p>{{info1}}</p>
    <p>{{myInfo1}}</p>
    <p>{{info2}}</p>
    <p>{{info4}}</p>
    <p>{{info5.name}}--{{info5.age}}</p>
    <h1>{{myInfo6}}</h1>
    <button @click="change">修改数据2</button>
  </div>
</template>

<script>
export default {
  // 父传子接受数据方式1：字符串数组——适用于普通场景
  // props: ['info1', 'info2'],
  // 父传子接受数据方式2：通过对象校验——适用于公共组件等高级场景
  props: {
    info1: [Array, String], // 校验格式
    info2: {
      type: String  // 校验格式的另一种写法
    },
    info3: {
      required: true  // 必填
    },
    info4: {
      default: '中午吃什么？' // 默认值
    },
    info5: {
      // 自定义校验函数，可以很灵活的校验
      validator(val) {
        return val.age > 18
      }
    },
    info6: {
      type: String
    }
  },
  data() {
    return {
      myInfo6: this.info6
    }
  },
  computed: {
    myInfo1() {
      return this.info1
    }
  },
  methods: {
    change() {
      // 单向数据流：单向下行，只能由父组件的更新流向子组件；反过来就不行
      // 简单数据类型不可修改；引用数据类型可以修改
      // this.info1 = '666';
      this.myInfo6 = 'gogogo'
    }
  },
}
</script>

<style>

</style>